<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在线拼音输入法 - 784040932</title>
<script language="javascript">
window.onload=function(){
	BodyOnLoad();
}
</script>
<style type="text/css">
<!--
textarea, input, select {
	resize: none;
	outline: none;
	font-size: 1em;
}
form textarea {
	font-size: 14px;
	line-height: 160%;
	width: 96%;
	height: 200px;
	padding: 4px;
	margin-bottom: 10px;
}
#input {
	width: 400px;
	position: absolute;
	float: left; 
}
#Comp {
	width: 140px;
	font-size: 14px;
	margin-right: 5px;
	float: left; 
}
#Cand {
	max-width: 200px;
	height: 205px;
	font-size: 14px;
	overflow: hidden;
	float: left; 
}
footer {
	bottom: 20px;
	margin-bottom: 20px;
	position: absolute;
}
-->
</style>
</head>

<body>

<form>
	<textarea id="InputArea" onkeypress="return ImeKeyPress(event)" onkeydown="return ImeKeyDown(event)" onkeyup="return ImeKeyUp(event)" onmouseover="this.focus();this.select()" class="form-control"></textarea>
</form>

<div id="input">

	<div>
		<input name="Comp" id="Comp" onfocus="IME.InputArea.focus();">
	</div>

	<div>
		<textarea name="Cand" id="Cand" onFocus="IME.InputArea.focus();"></textarea>
	</div>

</div>

<div>
	<input id="EnglishMode" onfocus="IME.InputArea.focus()" type="checkbox" name="EnglishMode">英文(Ctrl)
	<input id="FullShape" onfocus="IME.InputArea.focus()" type="checkbox" name="FullShape">全角字符(F12)
	<input id="AutoUp" onfocus="IME.InputArea.focus()" type="checkbox" name="AutoUp">自动上屏
	翻页 PageUp/PageDown
</div>

<footer>
V1.1 By 784040932.
</footer>

<script language="javascript" src="pinyin.js"></script>
<script language="javascript" src="pinyinime.js"></script>
<script language="javascript">
	var flag = false;//鼠标|手指是否按下的标记
	var cur = {//记录鼠标|手指按下时的坐标
		x:0,
		y:0
	}
	var nx,ny,dx,dy,x,y ;
	//按下时的函数
	function down(){
		flag = true;//确认鼠标|手指按下
		var touch ;
		if(event.touches){
			touch = event.touches[0];//多个鼠标|手指事件取第一个
		}else {
			touch = event;
		}
		cur.x = touch.clientX; //记录鼠标|手指当前的x坐标
		cur.y = touch.clientY;//记录鼠标|手指当前的y坐标
		dx = input.offsetLeft;//记录div当时的左偏移量
		dy = input.offsetTop;//记录div的上偏移量
	}
	function move(){
		if(flag){//如果是鼠标|手指按下则继续执行
			var touch ;
			if(event.touches){
				touch = event.touches[0];
			}else {
				touch = event;
			}
			nx = touch.clientX - cur.x;//记录在鼠标|手指x轴移动的数据
			ny = touch.clientY - cur.y;//记录在鼠标|手指y轴移动的数据
			x = dx+nx; //div在x轴的偏移量加上鼠标|手指在x轴移动的距离
			y = dy+ny; //div在y轴的偏移量加上鼠标|手指在y轴移动的距离
			input.style.left = x+"px";
			input.style.top = y +"px";
			//阻止页面的滑动默认事件
			document.addEventListener("touchmove",function(){
				event.preventDefault();
			},false);
		}
	}
	//鼠标|手指释放时候的函数
	function end(){
		flag = false; //鼠标|手指释放
	}
	var input = document.getElementById("input");
	input.addEventListener("mousedown",function(){
		down();
	},false);
	input.addEventListener("touchstart",function(){
		down();
	},false)
	input.addEventListener("mousemove",function(){
		move();
	},false);
	input.addEventListener("touchmove",function(){
		move();
	},false)
	document.body.addEventListener("mouseup",function(){
		end();
	},false);
	input.addEventListener("touchend",function(){
		end();
	},false);
</script>

</body>
</html>
